import React from 'react'
import * as PropTypes from 'prop-types';

import EchartsComponent from './EchartsComponent'
import styles from './style/index.less'

class Chart extends React.Component {
    static defaultProps = {
        dataSource: [],
        columns: {},
    }
  
    // TODO: 需改造，传递 props.children
    renderExtra(){
        const { props } = this;
        const { extra, dataSource } = props;

        let { children } = props;

        if(extra){
            const { list, source, y = 'top' } = extra;
            if(Array.isArray(list)){
                // 判断 source
                const { type, field, unit = '' } = source;

                let extraSource = {};
                if(dataSource && Array.isArray(dataSource)){
                    // type为first时，取dataSource里第一条结果
                    if(type === 'first'){
                        extraSource = dataSource[0]
                    }else if(type === 'count'){
                        // type为count时，取字段field值进行累加
                        // Fix: 精度丢失
                        const count = dataSource.reduce((accumulator, currentValue) => accumulator + currentValue[field]*10000, 0);
                        extraSource = { count: count/10000 }
                    }else{
                        // 从dataSource中匹配
                        extraSource = dataSource;
                    }
                }

                switch (y) {
                    case 'bottom':
                        children = list.map((ele, idx) => {
                            const { label, field } = ele;
                            return (<span className={styles.bottom} key={idx}>
                                <b>{extraSource && (extraSource[field] || extraSource[field] === 0)? extraSource[field]: '-'}</b>
                                {label}{unit}
                            </span>)
                        })
                        break;
                
                    default:
                        children = list.map((ele, idx) => {
                            const { label, field } = ele;
                            return (<span key={idx}>
                                {label}：<b>{extraSource && (extraSource[field] || extraSource[field] === 0)? extraSource[field]: '-'}{unit}</b>
                            </span>)
                        })
                        break;
                }
                
                return <div className={styles.extra}>{children}</div>
            }
        }
        return <>{children}</>
    }

  render() {
    const { type, style, dataSource, columns, color, other, extra = { y: 'top' } } = this.props;
    const { y } = extra;
    return (
        <div className={styles.chart} style={{style}}>
            {(!y || y === 'top') && this.renderExtra()}
            <EchartsComponent
                type={type}
                color={color}
                dataSource={dataSource}
                columns={columns}
                other={other}
            />
            {(y === 'bottom') && this.renderExtra()}
        </div>
    )
  }
}

Chart.propTypes = {
    // 一个对象可以是多种类型其中之一
    dataSource: PropTypes.oneOfType([
        PropTypes.array,
        PropTypes.object,
    ]),
    columns: PropTypes.object,
}
export default Chart
